<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goback"
    ></topTitle>
    <div class="mainCon">
      <el-form
        :model="formData"
        :rules="formRules"
        ref="formData"
        label-width="164px"
        class="demo-ruleForm"
      >
        <!-- 身份信息 -->
        <el-row>
          <el-col class="identityInfoTitle titleInfo">
            <div>身份信息</div>
          </el-col>
        </el-row>
        <el-row class="identityInfo">
          <el-col :span="18">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="employeeName" label="人员姓名：">
                    <el-input
                      v-model="formData.employeeName"
                      id="employeeName"
                      disabled
                      placeholder="根据阅读器读入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item prop="idCard" label="身份证号：">
                    <el-input
                      v-model="formData.idCard"
                      id="idCard"
                      disabled
                      placeholder="根据阅读器读入"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="employeeSex" label="人员性别：">
                    <el-select
                      class="selectWidth"
                      v-model="formData.employeeSex"
                      disabled
                      id="employeeSex"
                      placeholder="根据阅读器读入"
                    >
                      <el-option
                        v-for="item in sexOption"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item prop="employeeBirth" label="出生日期：">
                    <el-input
                      v-model="formData.employeeBirth"
                      id="employeeBirth"
                      disabled
                      placeholder="根据阅读器读入"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="employeeNation" label="人员民族：">
                    <el-select
                      class="selectWidth"
                      v-model="formData.employeeNation"
                      disabled
                      id="employeeNation"
                      placeholder="根据阅读器读入"
                    >
                      <el-option
                        v-for="item in nationOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="文化程度：">
                    <el-select
                      class="selectWidth"
                      v-model="formData.edu"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in eduOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item label="婚姻状况：">
                    <el-select
                      class="selectWidth"
                      v-model="formData.maritalStatus"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in marrigeOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="政治面貌：">
                    <el-select
                      class="selectWidth"
                      v-model="formData.politicalStatus"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in politicalOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="22">
                  <el-form-item label="家庭住址：">
                    <el-input
                      v-model="formData.homeAddress"
                      id="homeAddress"
                      disabled
                      placeholder="根据阅读器读入"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="6" style="padding-left: 50px">
            <div id="readIdCardBox">
              <ul>
                <li style="padding-left: 50px; margin-top: 10px">
                  <img
                    src="../../../static/img/employee/card.png"
                    id="cardImg"
                    style="width: 100px"
                  />
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <!-- 基础信息 -->
        <el-row class="identityInfo">
          <el-col :span="18">
            <el-col :span="24">
              <el-col class="basicInfoTitle titleInfo">
                <div>基础信息</div>
              </el-col>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple">
                <el-row>
                  <el-col :span="11">
                    <el-form-item label="工资卡银行：" prop="bankId">
                      <el-select
                        class="selectWidth"
                        v-model="formData.bankId"
                        placeholder="请选择"
                        clearable
                      >
                        <el-option
                          v-for="item in bankOptions"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="银行卡号：" prop="accountId">
                      <el-input
                        v-model="formData.accountId"
                        @blur="formData.accountId = changeValue($event)"
                        placeholder="请输入银行卡号"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="11">
                    <el-form-item label="手机号码：" prop="tel">
                      <el-input
                        v-model="formData.tel"
                        @blur="formData.tel = changeValue($event)"
                        placeholder="请输入手机号码"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="务工卡号：" prop="attNo">
                      <el-input
                        v-model="formData.attNo"
                        @blur="formData.attNo = changeValue($event)"
                        placeholder="请输入务工卡号"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-col>
          <el-col :span="6" style="padding-left: 50px">
            <div class="readIdCardBox faceCollectBox">
              <ul>
                <li>
                  <img :src="collectImg" style="width: 100px" />
                </li>
                <li style="margin-top: 10px" @click="faceCollection()">
                  <img
                    src="../../../static/img/face/collect.png"
                    style="cursor: pointer; width: 86px; height: 21px"
                  />
                </li>
                <a id="openExe" href="CardRead://"></a>
              </ul>
            </div>
          </el-col>
        </el-row>
        <!-- 合同信息 -->
        <el-row>
          <el-col class="contractInfoTitle titleInfo">
            <div>合同信息</div>
          </el-col>
        </el-row>

        <el-row class="identityInfo">
          <el-col :span="18">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="11">
                  <el-form-item
                    class="selectWidth"
                    prop="orgId"
                    label="所在部门："
                  >
                    <el-cascader
                      class="selectWidth"
                      v-model="orgId"
                      :options="orglist"
                      :props="{ checkStrictly: true }"
                      @change="handleChange"
                      clearable
                    ></el-cascader>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="职位：">
                    <el-input
                      v-model="formData.employeeType"
                      @blur="formData.employeeType = changeValue($event)"
                      placeholder="请输入职位"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="date" label="雇佣周期：">
                    <el-date-picker
                      v-model="formData.date"
                      type="daterange"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="基本工资：">
                    <el-input
                      v-model="formData.standardSalary"
                      @blur="formData.standardSalary = changeValue($event)"
                      placeholder="请输入职位"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="wageUnit">元/月</el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="合同附件：">
                    <uploadAnnex
                      @getFileList="getFileList"
                      :limitationFactor="limitationFactor"
                      @getFile="getFile"
                      :upLoadFile="upLoadFile"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" v-model="formData.contractImgUrl">
                  <uploadResult
                    style="margin-left: 120px"
                    :resultList="upLoadFile"
                    @callBackResult="getFile"
                  />
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row style="text-align: center; margin-top: 18px">
          <el-col :span="18">
            <el-form-item>
              <el-button
                class="commonBut saveBtn"
                type="primary"
                @click="saveToDetail"
                :loading="isSaveLoading"
                >保存</el-button
              >
              <el-button class="commonBut" @click="goback">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'

export default {
  name: 'employeeEdit',

  data() {
    var checkArea = (rule, value, callback) => {
      var that = this
      if (!that.orgId || that.orgId.length < 1) {
        return callback(new Error('所在部门不能为空'))
      } else {
        callback()
      }
    }
    return {
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 5, //自定义上传文件最大设置
        messageFileSizetip: '最多能上传5M以内的附件', //自定义id解决一个页面包含多个上传附件
        messagetip: '要求格式为png，jpg，jpeg格式，图片大小不超过5M', //自定义报错提示语
        formatType: 'typeOne', //自定义上传格式校验类型
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        methodTip: '合同附件支持png，jpg，jpeg', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      titleText: '编辑人员',
      back: true,
      formData: {
        employeeName: '', //人员姓名
        idCard: '', //身份证号
        employeeSex: '', //性别
        employeeBirth: '', //出生日期
        tel: '', //手机号码
        employeeNation: '', //名族
        homeAddress: '', //家庭住址
        edu: '', //教育程度
        politicalStatus: '', //政治面貌
        maritalStatus: '', //婚姻状况
        bankId: '', //工资银行
        accountId: '', //工资卡号
        orgId: '', //部门
        date: [],
        data: [], //日期区间
        // startDate: "", //雇佣开始时间
        // endDate: "" , //雇佣结束时间
        employeeType: '', //职位
        standardSalary: '', //基本工资
        employeeImgUrl: [], //员工身份证头像
        contractImgUrl: [], //合同附件
        queryParam: {}, //身份证传参
        isInit: false, //身份证验证
        employeeId: '', //详情到修改的务工id
        attNo: '', //务工卡号
        faceCameraPhoto: [], //人脸采集头像
      },
      orgId: '', //部门
      upLoadFile: [],
      srcList: [],
      oldSrcList: [],
      sexOption: [],
      nationOptions: [],
      bankOptions: [],
      eduOptions: [],
      marrigeOptions: [],
      politicalOptions: [],
      orglist: [], //部门
      formRules: {
        orgId: [
          {
            required: true,
            message: '所在部门不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        date: [
          {
            required: true,
            message: '请选择日期',
            trigger: 'blur',
          },
        ],
        employeeName: [
          {
            required: true,
            message: '请根据阅读器读入',
            trigger: 'blur',
          },
        ],
        idCard: [
          {
            required: true,
            message: '请根据阅读器读入',
            trigger: 'blur',
          },
        ],
        employeeSex: [
          {
            required: true,
            message: '请根据阅读器读入',
            trigger: 'blur',
          },
        ],
        employeeBirth: [
          {
            required: true,
            message: '请根据阅读器读入',
            trigger: 'blur',
          },
        ],
        employeeNation: [
          {
            required: true,
            message: '请根据阅读器读入',
            trigger: 'blur',
          },
        ],
        orgId: [
          {
            required: true,
            validator: checkArea,
            // message: "所在部门不能为空",
            trigger: 'change',
          },
        ],
        date: [
          {
            required: true,
            message: '请选择日期',
            trigger: 'blur',
          },
        ],
        tel: [
          {
            // required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        accountId: [
          {
            // required: true,
            pattern: /^\d{15,19}$/,
            message: '请输入15-19 位纯数字的银行卡号',
            trigger: 'blur',
          },
        ],
        standardSalary: [
          {
            // required: true,
            pattern: /^\d{1,7}(\.\d{0,2})?$/,
            message: '已超过金额最大值，请重新输入',
            trigger: 'blur',
          },
        ],
        attNo: [
          {
            // required: true,
            pattern: /^[^\u4e00-\u9fa5]{0,}$/,
            message: '请输入非汉字的务工卡号',
            trigger: 'blur',
          },
        ],
      },
      employeeId: '', //传过来的务工id
      contractId: '', //传过来的合同id
      isSaveLoading: false, // 保存loading
      collectImg: require('../../../static/img/employee/card.png'),
    }
  },
  created() {
    this.employeeId = this.$route.query.employeeId
    this.contractId = this.$route.query.contractId
    //字典表下拉框
    this.getSelectData('SEX')
    this.getSelectData('NATION')
    this.getSelectData('EDU')
    this.getSelectData('MARRIAGE')
    this.getSelectData('POLITICAL')
    this.getSelectData('BANK_TYPE')
    // 部门下拉框
    this.getOrglist()
    //获取人员详情数据
    this.getBatchInfo(this.employeeId, this.contractId)
  },
  mounted() {},
  methods: {
    /**
     * @description: 获取上传的附件
     */
    getFileList(val) {
      this.oldSrcList.push(val)
      this.srcList.push(val)
    },
    /**
     * @description: 获取上传的附件
     */
    getFile(val) {
      this.upLoadFile = val
    },

    /**
     * @description: 改变图片地址
     */
    changeSrcList(val) {
      this.srcList = val
    },
    //返回上一步
    goback() {
      this.$router.push({
        path: '/home/employee/employeeDetail',
        name: 'employeeDetail',
        query: {
          employeeId: this.employeeId,
          contractId: this.contractId,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/employee/employeeOn',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getSelectData(dicitemType) {
      this.axios({
        method: 'post',
        url: 'api-bs/base/dicitem/findbytype',
        data: {
          type: dicitemType,
        },
      })
        .then((response) => {
          if (dicitemType == 'SEX') {
            this.sexOption = response.data.result
          } else if (dicitemType == 'NATION') {
            this.nationOptions = response.data.result
          } else if (dicitemType == 'EDU') {
            this.eduOptions = response.data.result
          } else if (dicitemType == 'MARRIAGE') {
            this.marrigeOptions = response.data.result
          } else if (dicitemType == 'POLITICAL') {
            this.politicalOptions = response.data.result
          } else if (dicitemType == 'BANK_TYPE') {
            this.bankOptions = response.data.result
          }
        })
        .catch((response) => {})
    },
    getOrglist() {
      this.axios({
        method: 'post',
        url: 'api-c/organization/base/org/arc',
        data: {},
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.orglist = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    handleChange(item) {
      var orgId = this.orgId[this.orgId.length - 1]
      this.formData.orgId = orgId
    },
    getBatchInfo(employeeId, contractId) {
      this.isSaveLoading = true
      this.axios({
        method: 'post',
        url: 'api-e/nc/employee/expand/employees',
        data: {
          id: employeeId,
          contractId: contractId,
        },
      })
        .then((response) => {
          this.isSaveLoading = false
          var data = response.data.result
          this.formData.employeeName = data.name
          this.formData.idCard = data.idcard
          this.formData.employeeSex = data.sex
          this.formData.employeeBirth = data.birthday
          this.formData.tel = data.tel
          this.formData.employeeNation = data.nationality
          this.formData.homeAddress = data.address
          this.formData.edu = data.edu
          this.formData.maritalStatus = data.maritalStatus
          this.formData.politicalStatus = data.politicalStatus
          this.formData.bankId = data.bankId
          this.formData.accountId = data.accountId
          this.formData.employeeType = data.employeeType
          this.formData.attNo = data.attNo
          // this.formData.faceCameraPhoto = "["+data.faceCameraPhoto+"]";
          if (data.faceCameraPhoto) {
            console.log(JSON.parse(data.faceCameraPhoto).url)
            this.collectImg = JSON.parse(data.faceCameraPhoto).url
              ? JSON.parse(data.faceCameraPhoto).url
              : require('../../../static/img/employee/card.png')
            this.formData.faceCameraPhoto = '[' + data.faceCameraPhoto + ']'
          } else {
            this.formData.faceCameraPhoto = ''
          }

          this.formData.date = []
          this.formData.date = [data.startDate, data.endDate]
          this.formData.standardSalary = data.standardSalary
          this.upLoadFile = data.contractImgFile
          for (var i = 0; i < this.upLoadFile.length; i++) {
            this.srcList.push(this.upLoadFile[i].url)
            this.oldSrcList.push(this.upLoadFile[i].url)
          }
          if (data.employeeImgFile.url) {
            $('#cardImg').attr('src', data.employeeImgFile.url)
          }

          this.orgId = data.orgId
        })
        .catch((error) => {
          this.isSaveLoading = false
        })
    },
    //保存跳转到详情
    saveToDetail() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          // 保存更新
          this.submitFormUptate()
        } else {
          return false
        }
      })
    },
    submitFormUptate() {
      var data = {
        id: this.employeeId,
        contractId: this.contractId,
        name: this.formData.employeeName,
        idcard: this.formData.idCard,
        address: this.formData.homeAddress,
        birthday: this.formData.employeeBirth,
        tel: this.formData.tel,
        edu: this.formData.edu,
        nationality: this.formData.employeeNation,
        sex: this.formData.employeeSex,
        politicalStatus: this.formData.politicalStatus,
        maritalStatus: this.formData.maritalStatus,
        bankId: this.formData.bankId,
        accountId: this.formData.accountId,
        orgId: this.formData.orgId ? this.formData.orgId : this.orgId,
        startDate: this.formData.date[0],
        endDate: this.formData.date[1],
        employeeType: this.formData.employeeType,
        standardSalary: this.formData.standardSalary,
        contractImgUrl: JSON.stringify(this.upLoadFile),
        attNo: this.formData.attNo,
        faceCameraPhoto: this.formData.faceCameraPhoto,
        // imgSource: "IDCARD_READER" //身份证上传标识
      }
      this.isSaveLoading = true
      this.axios({
        method: 'post',
        url: 'api-e/nc/employee/expand/employees/edit',
        data: data,
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.$message({
              message: '保存成功',
              type: 'success',
            })
            this.$router.push({
              path: '/home/employee/employeeDetail',
              name: 'employeeDetail',
              query: {
                employeeId: this.employeeId,
                contractId: this.contractId,
              },
            })
            this.$store.commit('CHANGE_SLIDER_NAME', {
              oldUrl: '/home/employee/employeeOn',
              newUrl: this.$router.currentRoute.fullPath,
            })
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.isSaveLoading = false
          }
        })
        .catch((error) => {
          this.$message.error('保存失败')
          this.isSaveLoading = false
        })
    },
    //点击人脸采集
    faceCollection() {
      var that = this
      //判断浏览器兼容性
      if (!this.checkBrowser()) {
        return false
      }
      //点击间隔控制
      // this.perRead();

      var localIp = '127.0.0.1'
      // WebSocket服务的端口（该端口在C++正式上线时，需要指定一个唯一的端口）
      // 另外，这个端口最好是不常用的；再者，C++程序中针对端口这一块，最好多设置几个，当有端口被占用时，循环其他的端口，当然前端JS做同样的处理
      var localPort = '10080'
      // 应用名（或者工程名）
      var appName = 'ws'
      // 服务端WebSocket的访问路径（可自由指定）
      var serverPath = 'webSocket'
      // WebSocket的通道名称
      // 因为WebSocket服务端可以与多个客户端建立连接，为了区分不同的客户端，在客户端发起连接请求时，需要为连接的通道指定唯一标识
      // 因为我们开发的是C++服务端，安装在用户自己电脑上，所以实际应用时，一个服务端也只是对应一个客户端，所以这个channel有没有都没有关系
      var channel = 'zhangsan'
      // WebSocket服务端访问路径
      //var url = "ws://" + localIp + ":" + localPort + "/" + appName + "/" + serverPath + "/" + channel;
      var url = 'ws://' + localIp + ':' + localPort
      // 以上只是为了说明websocket的访问地址的相关组成部分
      // 实际应用中，可以把WebSocket的服务端地址固定下来，就没有必要再定义这么多变量了
      // 例如：var url = "ws://127.0.0.1:8080/ws/webSocket/zhangsan";
      if (this.socket != null) {
        this.socket.close()
        this.socket = null
      }

      if (this.socket == null) {
        this.socket = new WebSocket(url)
      } else {
        console.log(
          'WebSocket连接已经建立.socket连接状态：' + socket.readyState
        )
      }
      try {
        // WebSocket已经成功建立连接
        this.socket.onopen = function (msg) {
          try {
            // 前端JS向C++的WebScoket服务发送人脸识别的指令
            // C++的WebScoket服务获取到指令后，对指令进行判断
            // C++获取到人脸信息后，把信息放入消息通道即可
            var message = {
              type: 2,
              command: 'ID_FACE_RED',
            }
            that.toOpenFaceCollect()
            //socket.send(JSON.stringify(message));
          } catch (ex) {
            // swal("信息设置异常,请检查是否成功运行【身份证阅读程序.exe】.")
            //resultMsg("【readIDCard】连接异常,请检查是否成功运行【身份证阅读程序.exe】.");
            //resultMsg("【readIDCard】请重新建立WebScoket连接.");
          }
        }
        // WebSocket建立连接失败
        this.socket.onerror = function () {
          $('#openExe').click()
        }
        // 监听WebSocket的消息通道
        // 当消息通道中有消息时，会自动触发该函数
        this.socket.onmessage = function (msg) {
          // 前端可以直接从消息通道中获取到C++发送的消息
          //resultMsg("前端已经监听到WebSocket服务端有消息发来,【onmessage】socket连接状态："+socket.readyState);
          //resultMsg("从WebSocket的消息通道中获取到的身份证信息：");
          //resultMsg("websocket 消息通道："+msg.data);

          if (msg) {
            var returnObj = JSON.parse(msg.data)
            var imageCode = returnObj.ImgCode
            var src = 'data:image/png;base64,' + imageCode

            that.changeFacePic(src)
            // $('#face').attr("src","data:image/png;base64,"+imageCode)
          }
          // 获取到信息后，关闭WebSocket
          // this.socket.close()
          that.closeSocket()
          this.socket = null
        }
      } catch (ex) {}
    },
    toOpenFaceCollect() {
      this.socket.send('ID_FACE_RED')
    },
    changeFacePic(src) {
      this.collectImg = src
      this.uploadBase64(src)
    },
    uploadBase64(src) {
      this.axios({
        method: 'post',
        url: 'api-f/files/upload/base64',
        data: {
          image64: src,
        },
      })
        .then((response) => {
          var arr = []
          arr.push(response.data)
          this.formData.faceCameraPhoto = JSON.stringify(arr)
        })
        .catch((error) => {})
    },
    checkBrowser() {
      if (window.WebSocket) {
        return true
      } else {
        this.$message({
          message:
            '我们强烈建议您使用谷歌、火狐、360极速、Opera 等浏览器，如要使用IE，请使用IE10及以上版本',
        })
        return false
      }
    },
    closeSocket() {
      try {
        if (this.socket != null) {
          this.socket.close()
          this.socket = null
        }
        this.cancelKeepAlive()
      } catch (ex) {}
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  padding: 0;
  height: calc(100% - 67px);
  overflow-y: auto;
}
form.el-form {
  background: #fff;
  .selectWidth {
    width: 100%;
  }
  .titleInfo {
    background: #e4ebf1;
    width: 108px;
    height: 36px;
    text-align: center;
    color: #fff;
    margin-top: 35px;
    margin-bottom: 20px;
    font: bold 14px/36px Microsoft YaHei;
  }
  .identityInfoTitle {
    background: #02a2aa;
  }
  .instructions {
    color: #0098ce;
    margin-top: 10px;
    border-bottom: 1px solid #0098ce;
    &:hover {
      color: #0070f5;
      border-bottom: 1px solid #0070f5;
    }
  }
  .basicInfoTitle {
    background: #67ace4;
  }
  .contractInfoTitle {
    background: #f9a243;
  }
  .uploadBox {
    position: relative;
    .uploadImg {
      width: 96px;
      height: 36px;
      color: #009588;
      border: 1px solid #009588;
      line-height: 10px;
    }
    .uploadImgState {
      font-size: 14px;
      color: #999999;
      margin-left: 12px;
    }
    .upLoadDom {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      input {
        width: 100px;
        height: 36px;
        cursor: pointer;
      }
    }
  }
  .imgStyle {
    // margin-top: 20px;
    padding-left: 100px;
    li {
      position: relative;
      margin-right: 20px;
      margin-top: 10px;
      i {
        position: absolute;
        right: -6px;
        top: -10px;
        font-size: 20px;
      }
    }
  }
  .wageUnit {
    font-size: 14px;
    color: #666;
    padding: 8px 4px 8px 10px;
  }
  .saveBtn {
    background-color: #009588;
    border-color: #009588;
    color: #fff;
  }
}

.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  /* width: 350px; */
  width: 100%;
}

.readIdCardBox {
  text-align: center;
  width: 205px;
}
</style>
